<template>
  <div>
    <div v-loading="g_loading" style="height:80vh;">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-expand="onNodeExpand" :on-node-collapse="onNodeCollapse">
        <template slot="node" slot-scope="{node}">
          <div class="graph_main" @dblclick="propertyCompanyView(node)">
            <span style="cursor: pointer;">{{ node.text }}</span>
            <i v-if="node.data.internalCapitalCount > 0">多</i>
          </div>
        </template>
      </SeeksRelationGraph>
    </div>

    <!-- 添加或修改产权信息对话框 -->
    <el-dialog :title="$t(propertyName)" :visible.sync="propertyCompanyFormOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <propertyCompanyForm ref="propertyCompanyForm" />
    </el-dialog>
  </div>
</template>

<script>
// API文档地址：http://relation-graph.com/#/docs/graph
import SeeksRelationGraph from 'relation-graph'
import { getGraph } from '@/api/company/propertyCompany/propertyCompany'
import propertyCompanyForm from './propertyCompanyForm.vue'
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph, propertyCompanyForm },
  data() {
    return {
      g_loading: true,
      demoname: '---',
      propertyCompanyFormOpen: false,
      propertyName: '',
      graphOptions: {
        'zoomToFitWhenRefresh': false,
        'moveToCenterWhenRefresh': false,
        'allowShowMiniToolBar': true, // 是否显示工具栏
        'defaultFocusRootNode': false, // 是否根节点添加一个被选中的样式
        'allowShowZoomMenu': false, // 是否在右侧菜单栏显示放大缩小的按钮
        'backgrounImage': 'http://ai-mark.cn/images/ai-mark-desc.png',
        'backgrounImageNoRepeat': false,
        'layouts': [
          {
            'label': '中心',
            'layoutName': 'tree',
            'layoutClassName': 'seeks-layout-center',
            'defaultJunctionPoint': 'border',
            'defaultNodeShape': 0,
            'defaultLineShape': 1,
            // 'from': 'left',
            'min_per_width': '170',
            'max_per_width': '300',
            'min_per_height': '200'
          }
        ],
        'defaultLineMarker': {
          'markerWidth': 15,
          'markerHeight': 15,
          'refX': 30,
          'refY': 7,
          'data': 'M 14 7 L 1 .3 L 4 7 L .4 13 L 14 7, Z'
        },
        'defaultExpandHolderPosition': 'bottom',
        'defaultNodeShape': 1,
        'defaultNodeWidth': '150',
        'defaultLineShape': 4,
        // 'defaultJunctionPoint': 'lr',
        'defaultNodeBorderWidth': 1,
        'defaultLineColor': '#CED4E0',
        'defaultNodeBorderColor': '#CED4E0',
        'defaultNodeColor': 'rgba(0, 206, 209, 1)'
      }
    }
  },
  created() {
  },
  mounted() {
    this.demoname = this.$route.params.demoname
    this.setGraphData()
  },
  methods: {
    setGraphData() {
      // 使用要点：通过节点属性expandHolderPosition: 'right' 和 expanded: false 可以让节点在没有子节点的情况下展示一个"展开"按钮
      //         通过onNodeExpand事件监听节点，在被展开的时候有选择的去从后台获取数据，如果已经从后台加载过数据，则让当前图谱根据当前的节点重新布局

      getGraph().then(res => {
        if (res.datas) {
          var list = res.datas
          list.nodes[0].styleClass = 'level0'
          this.$refs.seeksRelationGraph.setJsonData(list, (seeksRGGraph) => {
            console.log(seeksRGGraph)
            // 这些写上当图谱初始化完成后需要执行的代码
            // 获取根节点的子节点，即可获得图谱第一层中的节点
            // var level_1_nodes = seeksRGGraph.getNodeById(res.datas.rootId).lot.childs
            // level_1_nodes.forEach(thisLevel1Node => {
            //   this.applyCollapseStyle2Node(thisLevel1Node)
            // })
            this.$refs.seeksRelationGraph.refresh()
            this.g_loading = false
          })
        }
      })
    },
    applyCollapseStyle2Node(_node) { // _node的子节点将被隐藏，同时让_node右侧显示一个加号，点击后可以展开子节点
      if (_node.lot.childs.length > 0) {
        _node.lot.childs.forEach(thisChildNode => {
          thisChildNode.isShow = false
          this.applyCollapseStyle2Node(thisChildNode)
        })
        _node.expanded = false
        _node.expandHolderPosition = 'right'
      }
    },
    onNodeCollapse(node, e) {
      console.log('onNodeCollapse:', node, e)
      // 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
      this.$refs.seeksRelationGraph.refresh()
    },
    onNodeExpand(node, e) {
      // 当有一些节点被显示或隐藏起来时，会让图谱看着很难看，需要布局器重新为节点分配位置，所以这里需要调用refresh方法来重新布局
      console.log('onNodeExpand:', node, e)
      this.$refs.seeksRelationGraph.refresh()
    },
    /** 修改按钮操作 */
    propertyCompanyView(row) {
      this.propertyCompanyFormOpen = true
      this.propertyName = row.text
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.propertyCompanyForm.init(row)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.rel-map-canvas{
  .rel-node{
    text-align: center!important;
    padding: 8px;
    background-color: #fff!important;
    color: #343434!important;
  }
  .c-btn-open-close span {
    background-color: #B7BECC!important;
  }
  .c-rg-line-text{
    fill: #0084FF!important;
  }
  .level0{
    background-color: #0084FF !important;
    color: #fff!important;
    border: 0 !important;
    font-weight: bold;
  }
}
/deep/.graph_main{
  position: relative;
  display: flex;
  align-items: center;
  span{
    flex: 1;
    min-width: calc(100% - 20px);
    font-size: 11px;
    word-break: break-all;
    line-height: 15px;
  }
  i{
    font-style: normal;
    white-space: nowrap;
    cursor: pointer;
    width: 15px;
    height: 15px;
    border: 1px solid;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
  }
}
</style>
